<template>
  <div class="py-24 pr-24 bd-filt-6 bgc-lightgrey">
    <el-form-item label="背景颜色" class="mb-24">
      <ColorSetting v-model="style.backgroundColor" />
    </el-form-item>
    <el-form-item label="文本颜色" class="mb-24">
      <ColorSetting v-model="style.color" />
    </el-form-item>
    <el-form-item label="文本" class="mb-24">
      <el-input v-model="config.text" type="textarea" rows="5" maxlength="99" resize="none" />
    </el-form-item>
    <el-form-item label="文本样式" class="mb-24">
      <FontStyleSetting v-model="style" />
    </el-form-item>
    <BorderSetting v-model="model" class="mb-24" />
    <el-form-item label="不透明度" class="mb-24">
      <OpacitySetting v-model="style" />
    </el-form-item>
    <JumpSetting v-model="config" />
  </div>
</template>

<script>
  import ColorSetting from '@/views/productEdit/components/settingComponent/ColorSetting';
  import FontStyleSetting from '@/views/productEdit/components/settingComponent/FontStyleSetting';
  import BorderSetting from '@/views/productEdit/components/settingComponent/BorderSetting';
  import OpacitySetting from '@/views/productEdit/components/settingComponent/OpacitySetting';
  import JumpSetting from '@/views/productEdit/components/settingComponent/JumpSetting';

  export default {
    components: { ColorSetting, FontStyleSetting, BorderSetting, OpacitySetting, JumpSetting },

    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      }
    },

    computed: {
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      }
    }
  };
</script>
<style lang="scss" scoped></style>
